<template>
	<view class="bankcard-public-layout">
		<xh-input title="持卡人" showTitle isSelect :showRightIcon="false" placeholder="" v-model="userStore.user.userRealName"></xh-input>
		<xh-header title="请绑定企业对公账户" color="#999"></xh-header>
		<xh-input showTitle title="银行卡号" placeholder="请输入对公银行账号" v-model="formStore.settleCardNo"></xh-input>
		<xh-input showTitle title="开户银行" placeholder="请选择" v-model="formStore.bankBranchName" isSelect @didSelect="showSelectBank"></xh-input>
		<xh-input showTitle title="开户城市" placeholder="请选择省/市" v-model="formStore.settleCardCity" isSelect @didSelect="showSelectCity"></xh-input>
		<xh-input showTitle title="开户支行" placeholder="请选择" v-model="formStore.bankName" isSelect @didSelect="showSelectBranchBank"></xh-input>
		<view class="bankcard-public-image-box">
			<xh-upload-credentials v-model="formStore.picUrl"></xh-upload-credentials>
		</view>
		<view class="submit-btn" style="margin-top: 50rpx;" @tap="submit">提交</view>
		<xh-select-city ref="cityRef" @result="selectCityResult"></xh-select-city>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { computed, ref } from 'vue'
	import { useUserStore, useFormStore } from '@/common/stores'
	import { bindBankCard } from '@/common/api/api.js'

	const userStore = useUserStore()
	const formStore = useFormStore()
	const cityRef = ref(null)
	const props = defineProps(['data'])
	const jsonData = JSON.parse(decodeURIComponent(props.data || '{}'))

	// 选择开户银行
	const showSelectBank = () => {
		uni.navigateTo({
			url: '/pages/my/auth/bankcard/select-bank/select-bank'
		})
	}
	// 选择支行
	const showSelectBranchBank = () => {
		if (uni.$uv.test.empty(formStore.bankBranchName)) {
			uni.$utils.showToast('请选择开户银行')
			return
		} else if (uni.$uv.test.empty(formStore.settleCardCityCode)) {
			uni.$utils.showToast('请选择开户城市')
			return
		}
		uni.navigateTo({
			url: '/pages/my/auth/bankcard/branch-bank/branch-bank'
		})
	}
	// 选择城市
	const showSelectCity = () => {
		cityRef.value.open()
	}
	// 选择城市结果回调
	const selectCityResult = (res) => {
		console.log(res)
		formStore.settleCardProvince = res.provinceName
		formStore.settleCardCity = res.cityName
		formStore.settleCardProvinceCode = res.provinceCode
		formStore.settleCardCityCode = res.cityCode
	}
	// 提交
	const submit = async () => {
		if (uni.$uv.test.empty(uni.$uv.trim(formStore.settleCardNo, 'all'))) {
			uni.$utils.showToast('请输入对公银行账号')
			return
		} else if (uni.$uv.test.empty(formStore.bankBranchName)) {
			uni.$utils.showToast('请选择开户银行')
			return
		} else if (uni.$uv.test.empty(formStore.settleCardCity)) {
			uni.$utils.showToast('请选择开户城市')
			return
		} else if (uni.$uv.test.empty(formStore.bankName)) {
			uni.$utils.showToast('请选择开户支行')
			return
		} else if (uni.$uv.test.empty(formStore.picUrl)) {
			uni.$utils.showToast('请上传开户许可证或者基本存款账户信息照片')
			return
		}
		let params = {}
		params.settleType = '0'
		params.settleName = userStore.user.userRealName
		params.picUrl = formStore.picUrl
		params.bankAddress = formStore.settleCardCityCode
		params.settleCardNo = uni.$uv.trim(formStore.settleCardNo, 'all')
		if (!uni.$uv.test.empty(formStore.bankName)) {
			params.bankName = formStore.bankName
		}
		if (!uni.$uv.test.empty(formStore.bankNo)) {
			params.bankNo = formStore.bankNo
		}
		if (!uni.$uv.test.empty(formStore.bankBranchNo)) {
			params.parentBankNo = formStore.bankBranchNo
		}
		if (!uni.$uv.test.empty(formStore.bankBranchName)) {
			params.bankBranch = formStore.bankBranchName
		}
		if (!uni.$uv.test.empty(jsonData)) {
			params.settleId = jsonData.id
			params.changeFlag = '1'
		}
		if (!uni.$uv.test.empty(formStore.bankIcon)) {
			params.bankIcon = formStore.bankIcon
		}
		await bindBankCard(params)
		uni.$utils.showToast('绑定成功')
		formStore.$reset()
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.bankcard-public-layout {
		padding-top: 1px;

		.bankcard-public-image-box {
			background-color: #fff;
			margin-top: 20rpx;
			padding: 30rpx 40rpx;

			.bankcard-public-image {
				border: 1px dotted #eee;
				width: 100%;
				height: 240rpx;

			}
		}
	}
</style>